<script>
	import store from '@/store/index.js';
	import common from '@/common/common.js';
	export default {
		onLaunch: function (options) {
			let info = uni.getSystemInfoSync(); // 获取手机系统信息
			store.commit('setSystem', info);

			// #ifdef MP-WEIXIN
			uni.hideTabBar();
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect(); // 获取小程序胶囊的位置

			this.globalData.menuButtonObject = menuButtonInfo;
			this.globalData.menuHeight = menuButtonInfo.height;
			this.globalData.capsuleWidth = menuButtonInfo.width;
			this.globalData.winwidth = info.windowWidth; // 当前屏幕的宽度
			this.globalData.statusBarHeight = info.statusBarHeight; // 获取小程序头部状态栏的高度
			this.globalData.windowWidth = menuButtonInfo.left ? menuButtonInfo.left : 281; // 获取除了胶囊的宽度的剩余宽度
			this.globalData.navBarHeight =
				menuButtonInfo.bottom -
				info.statusBarHeight +
				(menuButtonInfo.top - info.statusBarHeight);
			this.globalData.navHeight = this.globalData.navBarHeight;
			// #endif
			let navInfo = {
				navWidth: this.globalData.windowWidth ? this.globalData.windowWidth : 281,
				navHeight: this.globalData.navBarHeight ? this.globalData.navBarHeight : 40,
				totalHeight: this.globalData.navBarHeight + info.statusBarHeight,
			};
			store.commit('getNav', navInfo);
			store.commit('setLaunch', {
				launch: true,
				openAds: true,
			});
			if (store.state.showPrompt) store.commit('setPrompt', false);

			common.restart(options);
		},
		onShow: function () {
			if (!store.state.launch) store.commit('setPrompt', true);
			// 首页全局音频悬浮窗
			if (!store.state.launch && store.state.audioConfig)
				store.commit('setAudio', store.state.audioConfig);
		},
		onHide: function () {
			if (store.state.audioComp) store.commit('setAudio', null);
		},
		globalData: {
			color: '#ff4b4e',
			color_aid: '',
			statusBarHeight: 0,
			windowWidth: 0,
			navBarHeight: 40,
			navHeight: 40,
			winwidth: 375,
			windowHeight: 0,
			capsuleWidth: 87,
			menuHeight: 32,
			menuButtonObject: '',
			bgAudioManager: uni.getBackgroundAudioManager(),
		},
	};
</script>

<style lang="scss">
	@import url('/static/css/common.css');
	@import url('/static/css/kite.css');
	@import url('/static/css/main.css');
	@import 'uview-ui/index.scss';

	image {
		width: 100%;
		height: 100%;
	}

	.page {
		background-color: #ffffff;
		min-height: 100vh;
		padding-top: var(--height);
	}

	view,
	text,
	input {
		font-size: 24rpx;
	}

	.icon-xingxing1,
	.icon-xingxing {
		color: $uni-color-star !important;
	}

	.boxshow {
		box-shadow: 0 0rpx 20rpx #efefef;
	}

	.thmeColor {
		color: var(--color) !important;
	}

	.thmeBg {
		background: var(--color) !important;
	}

	.thmeBorder {
		border: 2upx solid var(--color) !important;
	}

	.thmeBorderBottom {
		border-bottom: 4upx solid var(--color) !important;
	}

	// 渐变背景色
	.toTop {
		background: linear-gradient(to top, var(--color), var(--color));
	}

	.toRight {
		background: linear-gradient(to right, var(--color), var(--color_aid));
	}

	.toLeft {
		background: linear-gradient(to left, var(--color), var(--color_aid));
	}

	.toRightto {
		background: linear-gradient(to right, var(--color_aid), var(--color), var(--color_aid));
	}

	.to45deg {
		background: linear-gradient(45deg, var(--color_aid), var(--color));
	}

	.icon-z {
		border-left: 4upx solid var(--color);
		border-bottom: 4upx solid var(--color);
	}

	.Rebate .tri {
		border-top-color: var(--color) !important;
	}

	.signColor,
	.lastSign {
		&::before {
			background-color: var(--color);
		}
	}

	.copyright {
		text-align: center;
		color: #666666;
		padding: 30rpx $uni-page-space;

		view {
			margin-top: 30rpx;
			font-size: 20rpx;
		}

		text {
			padding: 0 $uni-page-space;
			position: relative;
			flex: 1;
			font-size: 24rpx;

			&::before {
				content: '';
				position: absolute;
				width: 2rpx;
				height: 20rpx;
				background-color: #dddddd;
				left: 100%;
				top: 50%;
				margin-top: -10rpx;
			}

			&:nth-last-of-type(1)::before {
				display: none;
			}
		}
	}

	// 特价 团购标签
	.speTag {
		border-radius: 4rpx;
		color: white;
		font-size: 20rpx;
		padding: 2rpx 8rpx;
		background-color: $tag-bg;
		margin-right: 4rpx;
	}

	/* 遮罩 */
	.mask {
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		right: 0;
		bottom: 0;
		top: 0;
		left: 0;
		z-index: 999;
	}

	// 全局样式
	.flex-box {
		display: flex;
	}

	.flex {
		flex: 1;
	}

	.flex-between {
		justify-content: space-between;
	}

	.flex-center {
		justify-content: center;
	}

	.flex-around {
		justify-content: space-around;
	}

	.align-center {
		align-items: center;
	}

	.lines {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.lines2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.goodsTabs {
		position: relative;
		justify-content: space-around;
		height: 74rpx;
		box-shadow: 0 6rpx 8rpx 1rpx rgba(105, 105, 105, 0.1);
		background-color: white;
	}

	.goodsTabItem {
		position: relative;
		justify-content: center;
	}

	// 滚动基准线
	.fixedLine {
		height: 2rpx;
		background: white;
	}

	.MORE {
		position: relative;
	}

	.MORE::after {
		position: absolute;
		content: '+';
		color: inherit;
		font-size: 18rpx;
		top: -6px;
		line-height: normal;
	}

	.top_oper {
		top: 270rpx;
		right: -80upx;
		position: fixed;
		z-index: 30;
		/* #ifdef H5 */
		margin-top: 100rpx;

		/* #endif */
		.top_oper_item {
			width: 60rpx;
			margin: 0 0 20rpx 30rpx;
			height: 60rpx;
			display: block;
			border-radius: 50%;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.toRight {
		background: linear-gradient(to right, var(--color), var(--color_aid));
	}

	@keyframes translater {
		70% {
			transform: translateX(-130upx);
		}

		100% {
			transform: translateX(-110upx);
		}
	}

	@keyframes translater1 {
		100% {
			transform: translateX(110upx);
		}
	}

	@keyframes out {
		0% {
			right: -56upx;
			transform: rotate(-34deg);
		}

		2% {
			right: -36upx;
			transform: rotate(-43deg);
		}

		20% {
			right: -36upx;
			transform: rotate(-43deg);
		}

		40% {
			right: -56upx;
			transform: rotate(-34deg);
		}

		100% {
			right: -56upx;
			transform: rotate(-34deg);
		}
	}

	.shareBox {
		width: 98upx;
		height: 98upx;
		position: fixed;
		z-index: 100;
		/* #ifdef H5 */
		top: 142upx;
		/* #endif */
		/* #ifdef MP */
		top: 274upx;
		/* #endif */
		animation-delay: 1s;
		animation: out 10s linear infinite;
	}

	.shareAni {
		animation: translater 0.3s linear forwards;
	}

	.shareAni1 {
		animation: translater 0.3s linear forwards;
		animation-delay: 0.2s;
	}

	.hideAni {
		animation: translater1 0.3s linear forwards;
	}

	.hideAni1 {
		animation: translater1 0.3s linear forwards;
		animation-delay: 0.2s;
	}

	*,
	page,
	view,
	scroll-view {
		-webkit-overflow-scrolling: touch;
	}

	page::-webkit-scrollbar,
	view::-webkit-scrollbar {
		display: none;
	}

	uni-modal .uni-modal__btn.uni-modal__btn_primary {
		color: #ffffff !important;
		background: #ff0000;
	}

	button {
		outline: none !important;
		padding: 0 !important;
		position: relative;
	}

	button:after {
		display: none;
	}

	.uni-video-container,
	.uni-video-cover {
		background-color: unset !important;
	}

	.ftr_buy_info_goods_info .ftr_buy_info_goods_price {
		margin-top: 40rpx;
	}

	.agoods .agoods_thumb {
		overflow: hidden;
	}

	.kite-classify-names.kite-classify-active .kite-classify-box {
		border-left-color: var(--color);
	}

	.sharebox,
	.sharebox .qrImg {
		width: 600upx;
		text-align: center;
	}

	.rich-text-box {
		background-color: #ffffff;
	}

	.unread {
		position: relative;
	}

	//小红点
	.unread::after {
		position: absolute;
		content: attr(data-num);
		padding: 0 8rpx;
		min-height: 30rpx;
		min-width: 30rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		background-color: #e24723;
		left: 66%;
		color: white;
		font-size: 20rpx;
		top: -10rpx;
		line-height: 30rpx;
	}

	// 底线
	.DiLine {
		text-align: center;
		color: #cccccc;
		font-size: 24rpx;
		line-height: 80rpx;
	}

	.top_oper_item image {
		width: 60upx;
		height: 60upx;
	}

	.success-color {
		color: $uni-color-success;
	}

	.error-color {
		color: $uni-color-error;
	}

	.btn-contact {
		position: absolute;
		height: 100%;
		width: 100%;
		right: 0;
		top: 0;
		opacity: 0;
		z-index: 1;
	}

	// 字体图标
	.icon-xiangyouxiayiye {
		color: #999999;
	}

	.icon-wuliu {
		font-size: 36rpx;
		margin-right: 15rpx;
	}

	.icon-dianpu {
		font-size: 36rpx;
		margin-right: 15rpx;
		vertical-align: -2rpx;
	}

	.icon-guanbi {
		font-size: 60upx;
		color: white;
		display: block;
		text-align: center;
		margin-top: 20upx;
	}

	.icon-xuanzhong {
		font-size: 28rpx;
		color: white;
		margin-top: 4rpx;
	}

	.icon-tubiao09 {
		font-size: 44rpx;
	}

	.starBox .iconfont {
		width: 30rpx;
		font-size: 30rpx;
		margin: 0 2rpx;
		height: 30rpx;
	}

	.icon-conversation_icon {
		margin-top: -2rpx;
		vertical-align: -2rpx;
	}

	.myPrice::before {
		content: '￥';
		font-weight: normal;
		color: inherit;
		font-size: 24rpx;
	}

	// 规格
	.specsBox {
		height: 40upx;
		display: flex;
		align-items: center;
	}

	.specsBox .txt {
		background-color: #f9f9f9;
		font-size: 20rpx;
		color: #747474;
		border-radius: 4upx;
		white-space: nowrap;
		text-overflow: ellipsis;
		border: 1px solid #ebebeb;
		padding: 0 12rpx;
		// padding:0 40rpx 0 10rpx; 可以修改规格时用这个
	}

	// 发帖入口
	.postEnter {
		width: 88rpx;
		height: 88rpx;
		position: fixed;
		z-index: 99;
		right: 24rpx;
		bottom: 250rpx;
		border-radius: 50%;

		.editorImg {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 56upx;
			height: 56upx;
		}
	}

	// 价格说明
	.price_description {
		padding: 0 20rpx 10rpx;

		> text {
			position: relative;
			display: inline-block;
			color: white;
			padding: 2rpx 8rpx;
			color: $uni-color-price;
			font-size: 22rpx;
			text-align: justify;

			.bg {
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				border-radius: 4rpx;
				background-color: $uni-color-price;
				opacity: 0.25;
			}
		}
	}

	// 返回顶部
	.back_top {
		width: 80rpx;
		height: 80rpx;
		border-radius: 100px;
		background: rgba(0, 0, 0, 0.4);
		position: fixed;
		right: 24rpx;
		bottom: 150rpx;
		z-index: 30;
		margin-bottom: constant(safe-area-inset-bottom);
		margin-bottom: env(safe-area-inset-bottom);
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;

		.icon-xiangshang {
			color: white;
			font-size: 40rpx;
			margin-top: -4rpx;
			position: relative;
			z-index: 1;
		}
	}

	// 缺省页
	.emptyPage {
		width: 100%;

		image {
			width: 50%;
			display: block;
			margin: 0 auto;
			height: 185rpx;
		}

		.emptyText {
			text-align: center;
			line-height: 44rpx;
			color: #999999;
			font-size: 28rpx;
			padding-top: 40rpx;
		}
	}

	// 瀑布流
	.my-box {
		width: 100%;
		display: flex;

		.left-box {
			width: calc(50% - 10rpx);
			margin-right: 20rpx;
		}

		.right-box {
			width: calc(50% - 10rpx);
		}

		.my-goods-box {
			background-color: #ffffff;
			border-radius: 12rpx;
			overflow: hidden;
			margin-bottom: 20rpx;
			position: relative;
			box-shadow: 0 0 6rpx 1px #ededed;
		}

		.goods-box-msg {
			padding: 14rpx 20rpx;

			.price_description {
				padding: 0;
				display: inline-block;
				margin-top: 8rpx;
				margin-left: -4rpx;
			}
		}
	}

	.repeatGoodsList {
		padding-bottom: 20rpx;

		.goodImg {
			width: 100%;
		}

		.hisGoodsName2 {
			margin-bottom: 2rpx;
			line-height: 34rpx;
			font-size: 28rpx;
			max-height: 68rpx;
		}

		.color333 {
			color: #333333;
			padding: 0;
			font-size: 26rpx;

			.bg {
				display: none;
			}
		}

		.prices {
			margin-top: 10rpx;

			.priceNow {
				margin-right: 10rpx;

				.price {
					font-size: 32rpx;
					color: $uni-color-price;
				}
			}

			.priceReg {
				color: #999;
				text-decoration: line-through;

				.price {
					color: #999;
					text-decoration: line-through;
				}
			}

			.position {
				text {
					font-size: 26rpx;
					color: #666666;
					margin-left: 6rpx;
				}
			}
		}

		.saled {
			margin-top: 10rpx;

			text {
				color: #888888;
				font-size: 24rpx;
				padding-right: 20rpx;
				border-right: 1px solid #dddddd;
				margin-right: 20rpx;
				line-height: 20rpx;

				&:nth-last-of-type(1) {
					border: none;
				}
			}
		}

		.maskObtained {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			background: rgba(0, 0, 0, 0.2);
			border-radius: 12rpx;

			.icon-obtained {
				position: absolute;
				width: 80px;
				height: 80px;
				left: 50%;
				top: 50%;
				z-index: 3;
				transform: translate(-50%, -50%);
			}
		}
	}

	.youTitle {
		text-align: center;
		padding: 24rpx;

		image {
			height: 32rpx;
		}

		text {
			&:nth-of-type(1) {
				width: 24rpx;
				border-radius: 100%;
				height: 10rpx;
				background-color: red;
				transform: rotate(25deg);
			}

			&:nth-of-type(2) {
				width: 32rpx;
				border-radius: 100%;
				height: 12rpx;
				background-color: red;
				transform: rotate(40deg);
			}

			&:nth-of-type(4) {
				width: 24rpx;
				border-radius: 100%;
				height: 10rpx;
				background-color: red;
				transform: rotate(-25deg);
			}

			&:nth-of-type(3) {
				width: 32rpx;
				border-radius: 100%;
				height: 12rpx;
				background-color: red;
				transform: rotate(-40deg);
			}
		}

		view {
			font-size: 32rpx;
			font-weight: bold;
			padding: 0 30rpx;
		}
	}

	.profitTitle_ {
		margin-top: 10rpx;

		text {
			color: #ff0b03;
			font-size: 20rpx;
			border-radius: 6rpx;
			border: 1px solid #eeeeee;
			display: inline-block;
			padding: 2rpx 8rpx;
		}
	}
</style>
